<template>
  <div class="backendbox">
    <el-tabs type="border-card" style="height:100%">
      <el-tab-pane :lazy="true">
        <span slot="label">
          <i class="el-icon-edit-outline"></i> 文章管理
        </span>
        <vue-scroll :ops="ops">
          <div>
            <el-button
              class="write"
              type="primary"
              icon="el-icon-edit"
              @click="onWrite"
              >写博客</el-button
            >
            <article-table
              @edit="editArticle"
              ref="articletable"
            ></article-table>
          </div>
        </vue-scroll>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"> <i class="el-icon-user"></i> 个人信息 </span>
        <personal-file></personal-file>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"> <i class="el-icon-document"></i>日志 </span>
        <vue-scroll :ops="ops">
          <log-table></log-table>
        </vue-scroll>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"> <i class="el-icon-message"></i> 公告 </span>
        <vue-scroll :ops="ops">
          <announcement></announcement>
        </vue-scroll>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"> <i class="el-icon-chat-dot-round"></i> 留言 </span>
        <vue-scroll :ops="ops">
          <message-table></message-table>
        </vue-scroll>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">
          <i class="el-icon-chat-line-square"></i> 评论
          <span>({{ mount }})</span>
        </span>
        <vue-scroll :ops="ops">
          <comments-table></comments-table>
        </vue-scroll>
      </el-tab-pane>
    </el-tabs>
    <!-- 文章编辑 -->
    <el-card class="box-card" v-if="isShow">
      <div slot="header" class="clearfix">
        <span>编辑文章</span>
        <el-tooltip
          content="退出后，文章将丢失"
          placement="bottom"
          effect="light"
        >
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="exit"
            >关闭</el-button
          >
        </el-tooltip>
      </div>
      <el-input
        v-model="title"
        placeholder="请输入文章标题"
        prefix-icon="el-icon-edit-outline"
      ></el-input>

      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        >{{ tag }}</el-tag
      >
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+ New Tag</el-button
      >
      <el-button type="primary" @click="published">发表文章</el-button>
      <mavon-editor v-model="value" ref="editor" @change="getContent" />
    </el-card>
  </div>
</template>
<script>
import { CheckLogin, PublishedArticle } from "../../api/index"
import PersonalFile from "./PersonalFile"
import ArticleTable from "./ArticleTable"
import Announcement from "./Announcement"
import MessageTable from "./MessageTable"
import LogTable from "./LogTable"
import CommentsTable from "./commentsTable"

export default {
  data() {
    return {
      isShow: false,
      _id: null,
      date: "",
      views: 0,
      screenWidth: document.body.clientWidth, // 屏幕尺寸
      title: "", //文章标题
      dynamicTags: [], //标签
      inputVisible: false, //标签文本框
      inputValue: "", //标签文本框的值
      value: "", //mavon-editor的纯文本
      centent: "", //mavon-editor带标签的文本
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {},
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  computed: {
    mount: function() {
      return this.$store.getters.getReadMount
    },
  },
  components: {
    ArticleTable,
    PersonalFile,
    Announcement,
    MessageTable,
    LogTable,
    CommentsTable,
  },
  created() {
    CheckLogin().then((res) => {
      if (!res.isLogin) {
        this.$router.push("/home")
      }
    })
  },

  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  methods: {
    onWrite() {
      this.isShow = true
    },
    exit() {
      this.isShow = false
      this.value = ""
      this.dynamicTags = []
      this.title = ""
      this._id = null
      this.date = ""
      this.views = 0
    },

    //点击编辑文章时触发的事件，article是从子组件mavon-editor传递到过来的数据
    editArticle(article) {
      this.isShow = true
      this.value = article.value
      this.dynamicTags = article.category
      this.title = article.title
      this._id = article._id
      this.date = article.date
      this.views = article.views
    },

    // 标签相关的方法
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ""
    },

    // markdown相关的方法
    getContent() {
      // this.$refs.editor.d_render 获取带标签的文本
      this.centent = this.$refs.editor.d_render
    },

    // 发表文章
    async published() {
      var result
      if (this._id) {
        result = await PublishedArticle({
          _id: this._id,
          title: this.title,
          category: this.dynamicTags,
          content: this.centent,
          value: this.value,
          views: this.views,
          date: this.date,
        })
      } else {
        result = await PublishedArticle({
          title: this.title,
          category: this.dynamicTags,
          content: this.centent,
          date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", new Date()),
          value: this.value,
        })
      }
      if (result.status) {
        this.$notify({
          title: "成功",
          message: result.msg,
          type: "success",
        })
        this.isShow = false
        this._id = null
        this.date = ""
        this.views = 0
        this.$refs.articletable.getDate()
        this.title = ""
        this.dynamicTags = [] //标签
        this.value = "" //mavon-editor的纯文本
      } else {
        this.$notify.error({
          title: "错误",
          message: result.msg,
        })
      }
    },
    // dateFormat(fmt, date) {
    //   let ret
    //   const opt = {
    //     "Y+": date.getFullYear().toString(), // 年
    //     "m+": (date.getMonth() + 1).toString(), // 月
    //     "d+": date.getDate().toString(), // 日
    //     "H+": date.getHours().toString(), // 时
    //     "M+": date.getMinutes().toString(), // 分
    //     "S+": date.getSeconds().toString(), // 秒
    //     // 有其他格式化字符需求可以继续添加，必须转化成字符串
    //   }
    //   for (let k in opt) {
    //     ret = new RegExp("(" + k + ")").exec(fmt)
    //     if (ret) {
    //       fmt = fmt.replace(
    //         ret[1],
    //         ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
    //       )
    //     }
    //   }
    //   return fmt
    // },
  },
}
</script>
<style lang="scss" scoped>
.backendbox {
  margin: 20px 20px;
  width: calc(100% - 40px);
  min-width: 1000px;
  height: calc(100% - 40px);
}
.tabbox {
  height: calc(100% - 40px);
  overflow: hidden;
}
.write {
  position: absolute;
  right: 15px;
  top: 0px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-tabs {
}
.el-card {
  position: absolute;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px);
  margin: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 99;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-tag {
  margin-right: 5px;
}
.el-input {
  width: 400px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.v-note-wrapper {
  height: 80vh;
}
.sdage {
  color: white;
  background: red;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
</style>
<style lang="scss">
.el-tabs__content {
  height: calc(100% - 60px) !important;
  .el-tab-pane {
    height: 100% !important;
  }
}
</style>
